<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title> 太空穿越   </title>
        <#assign base=request.contextPath  />
    <link rel="stylesheet" href="${base}/admin/MyStatic/frame/layui/css/layui.css" media="all">
    <script type="text/javascript" src="${base}/MyStatic/js/zhang.js"></script>
    <script src="${base}/admin/MyStatic/js/jquery.min.js"></script>
    <script src="${base}/admin/MyStatic/frame/layui/layui.js"></script>

    <script src="${base}/admin/MyStatic/js/echars/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="dir" style="width: 1600px;height:700px;"></div>
<div id="dir2" style="width: 1600px;height:700px;"></div>

<div id="moeny">

</div>






<script>
    var myChart = echarts.init(document.getElementById('dir'));
    var myChart2 = echarts.init(document.getElementById('dir2'));
    var option;
 option = {
            title: {
                text: '交易额'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                data:  ['','']
            },
            yAxis: {
                splitLine: {
                    show: false
                }
            },
            toolbox: {
                left: 'center',
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {},
                    magicType: {
                        type: ['line', 'bar', 'stack', 'tiled']
                    }
                }
            },
            dataZoom: [{
                startValue: '2014-06-01'
            }, {
                type: 'inside'
            }],
            visualMap: {
                top: 10,
                right: 10,
                pieces: [{
                    gt: -10000,
                    lte: 0,
                    color: '#096'
                }, {
                    gt: 0,
                    lte: 2000,
                    color: '#ffde33'
                }, {
                    gt: 2000,
                    lte: 5000,
                    color: '#ff9933'
                }, {
                    gt: 5000,
                    lte: 7000,
                    color: '#cc0033'
                }, {
                    gt: 7000,
                    lte: 9000,
                    color: '#660099'
                }, {
                    gt: 9000,
                    color: '#7e0023'
                }],
                outOfRange: {
                    color: '#999'
                }
            },
     animation:true ,
            series: {
                name: '交易额',
                type: 'line',
                data:[0,0],
                markLine: {
                    silent: true,
                    data: [{
                        yAxis: 0
                    }, {
                        yAxis: 2000
                    }, {
                        yAxis: 5000
                    }, {
                        yAxis: 7000
                    }, {
                        yAxis: 10000
                    }]
                }
            }
 };



var option2TypeData=[];
var option2Data0=[];
var option2Data1=[];
var option2Data2=[];
var option2Data3=[];
   var  option2 = {
        title: {
            text: '交易数据'
        },
        legend: {
            data: ['类型1', '类型2','类型3','类型0'],
            //  data: ['类型0数据','类型1数据', '类型2数据','类型3数据'],
            align: 'left'
        },
        toolbox: {
            // y: 'bottom',
            feature: {
                magicType: {
                    type: ['line', 'bar', 'stack', 'tiled']
                },
                dataView: {},
                saveAsImage: {
                    pixelRatio: 2
                }

            }
        },
        tooltip: {},
        xAxis: {
            data:option2TypeData,
            silent: false,
            splitLine: {
                show: false
            }
        },
        yAxis: {
        },
        series: [{
            name: '类型1',
            type: 'bar',
            data: option2Data1,

        }, {
            name: '类型2',
            type: 'bar',
            data: option2Data2,

        },
         {
            name: '类型3',
            type: 'bar',
            data: option2Data3,

        },
         {
            name: '类型0',
            type: 'bar',
            data: option2Data0,

        }

        ],
        animationEasing: 'elasticOut',

    };
    myChart.setOption(option);
    myChart2.setOption(option2);

    var websocket = null;

    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        websocket = new WebSocket("ws://127.0.0.1:8081/websocket/122");
    }
    else{
        alert('Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function(){
        $("#moeny").append(
                '<blockquote class="layui-elem-quote">连接失败....</blockquote>'
        );
    };

    //连接成功建立的回调方法
    websocket.onopen = function(event){
      $("#moeny").append(
          '<blockquote class="layui-elem-quote" id="msg">连接成功,正在等待推送交易数据....</blockquote>'
      );
    }

    //接收到消息的回调方法
    websocket.onmessage = function(event){
        if(option2Data0.length>100){
            option2Data0=[];
            option2Data1=[];
            option2Data2=[];
            option2Data3=[];
            option2TypeData=[]
        }


      //  setMessageInnerHTML(event.data);
        var data=JSON.parse(event.data)
         if(typeof (data.moeny)!="undefined"){
             var myDate = new Date();//获取系统当前时间
             option.xAxis.data.push(myDate.toLocaleTimeString())
             option.series.data.push(data.moeny)
             myChart.setOption(option,true);
         }else{
             $("#msg").html(data.msg)
         }
        if(typeof (data.data)!="undefined"){
              var allData=JSON.parse(data.data).link1;
            var myDate = new Date();//获取系统当前时间
                option2TypeData.push(myDate.toLocaleTimeString())
            for (let i = 0; i < allData.length; i++) {
                let creeData=JSON.parse(allData[i]);
                if(creeData.type==0){
                    option2Data0.push(creeData.moeny)
                }  if(creeData.type==1){
                    option2Data1.push(creeData.moeny)
                }  if(creeData.type==2){
                    option2Data2.push(creeData.moeny)
                } if(creeData.type==3){
                    option2Data3.push(creeData.moeny)
                }

            }
            myChart2.setOption(option2,true);
        }else{
            $("#msg").html(data.msg)
        }
    };

    //连接关闭的回调方法
    websocket.onclose = function(){
        setMessageInnerHTML("close");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
        websocket.close();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML){
        $("#moeny").append(
        '<blockquote class="layui-elem-quote">'+innerHTML+' </blockquote>'
        )
        window.scrollTo(0,document.body.scrollHeight)
    }

    //关闭连接
    function closeWebSocket(){
        websocket.close();
    }

    //发送消息
    function send(){
        var message = document.getElementById('text').value;
        websocket.send(message);
    }
    //滚动条
    function scTop(){
        var div = document.getElementById('moeny');
        div.scrollTop = div.scrollHeight;
    }
</script>
</body>
</html>